<template>
	<div>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">移动滑块</div>
            <el-button size="default" type="primary" @click="onShow('blockPuzzle')"> 开启验证码 </el-button>
		</el-card>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">点击文字</div>
            <el-button size="default" type="primary" @click="onShow('clickWord')"> 开启验证码 </el-button>
		</el-card>
		<verify mode="pop" @success="onSuccess" @error="onError" :captchaType="state.captchaType" :imgSize="{ width: '400px', height: '200px' }" ref="verifyRef" />
	</div>
</template>

<script setup lang="ts" name="compVerify">
import { ref, reactive } from 'vue';

const state = reactive({
	captchaType: '',
});

const verifyRef = ref(null);

const onShow = (type) => {
	state.captchaType = type;
	verifyRef.value?.show();
};

const onSuccess = (res) => {
	console.log('验证成功',res);
};

const onError = (res) => {
	console.log('验证失败', res);
};

</script>

<style scoped lang="scss"></style>
